<template>
  <view class="cu-modal drawer-modal justify-end" :class="{ show: visible }" @tap="hide">
    <view class="cu-dialog basis-lg cardStyle" @tap.stop>
      <scroll-view class="page paddings" scroll-y>
        <view class="grid col-5">
          <view v-for="(subject, index) in subjects" :key="index" class="margin-tb-sm text-center subjectNum">
            <button :class="getCardClass(subject)" @click="goToQuestion(index)">
              <text class="t1">{{ index + 1 }}</text>
              <text class="t2">{{ getCardStatus(subject) }}</text>
            </button>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    visible: Boolean, // 是否显示答题卡
    subjects: Array, // 题目列表
    currentIndex: Number // 当前题目索引
  },
  methods: {
    hide() {
      this.$emit('hide');
    },
    goToQuestion(index) {
      this.$emit('go-to-question', index);
    },
    getCardClass(subject) {
      if (subject.userAnswer === '') return 'line-greys';
      if (subject.userAnswer === subject.answer) return 'bg-greens';
      return 'errorNum';
    },
    getCardStatus(subject) {
      if (subject.userAnswer === '') return '未答题';
      if (subject.userAnswer === subject.answer) return '已答题';
      return '答错题';
    }
  }
};
</script>

<style scoped>
.cardStyle {
  position: absolute;
  bottom: 0;
  width: 78%;
}

.subjectNum .btn {
  width: 104rpx;
  height: 104rpx;
  line-height: 1;
  padding: 20rpx 0;
}

.t1 {
  font-size: 35rpx;
}

.t2 {
  font-size: 22rpx;
}

.line-greys {
  background-color: #C8C8C8;
  color: #000;
}

.bg-greens {
  background-color: #0071BC;
  color: #fff;
}

.errorNum {
  background-color: #FE9393;
  color: #fff;
}
</style>